<template>
    <div class="help-page" v-loading="loading">
        <div class="help-main">
            <div class="help-type">
                <h3 class="type-title">文章分类</h3>
                <div class="type-list">
                   <!-- <div class="type-item" v-for="(item,index) in typeList" @click="select(index)" :class="item.addClass">{{item.treeName}}
                      <div class="type-item"  v-for="(item1,index1) in item.childList" @click="select(index1)" :class="item1.addClass">{{item1.treeName}}</div>
                    </div> -->
                    <el-tree :data="typeList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                </div>
            </div>
            <div class="help-content">
                <h3 class="type-title">使用帮助</h3>
                <div class="address">
                    <span class="text">你当前所在位置：</span>
                    <el-breadcrumb separator-class="el-icon-arrow-right" >
                        <el-breadcrumb-item class="hander" to="/index">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>帮助中心</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="clear"></div>
                <div class="help-all">
                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                    <div class="search" @click="getData">搜索</div>
                    <div class="clear"></div>
                </div>
                <div class="data-title">
                    <span class="name">文章名称</span>
                    <span class="name">发布日期</span>
                </div>
                <div class="clear"></div>
                <div class="content-help">
                  <div class="data-item" v-for="(item,index) in list">
                      <span class="name" @click="goContent('/helpContent/'+item.id)">{{item.title}}</span>
                      <span class="time">{{item.updateDate}}</span>
                  </div>
                </div>

                <ui-pagination class="study-pagination"  :total="total" @pageChange="pageChange" :size="10" v-show="list.length!=0"></ui-pagination>
                <nodata v-show="show && list.length==0" style="float:left"></nodata>
            </div>
            <div style="clear:both"></div>
        </div>


    </div>
</template>

<script>
import Pagination from '@/components/pagination.vue'
import nodata from '@/components/nodata.vue'
export default {

    components: {
        'ui-pagination':Pagination,
        nodata
    },
    data(){
        return{
            total:null,
            input:'',
            typeList:[],
            show:false,
            loading:false,
            list:[],
            type:'',
            pageNo:1,
            defaultProps: {
              children: 'childList',
              label: 'treeName'
            }
        }
    },
    created(){
        this.getType();
        this.getData();
    },
    mounted(){

    },
    methods:{
         handleNodeClick(data) {
            console.log(data);
            this.type = data.id;
            this.pageNo = 1;
            this.getData();
         },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        select(index){
            this.typeList.forEach((item,i)=>{
                if(i==index){
                    item.addClass = "active";
                    this.type = item.id;
                    this.pageNo = 1;
                    this.getData();
                }
                else{
                    item.addClass = ""
                }
            })
        },
        goPage(){

        },
        getType(){
            let that = this;
            this.$axios.$post("/f/listHelperClassify")
            .then(function (response) {
                let list = response.data;
                if(list){
                    list.forEach((item,i)=>{
                        item.addClass="";

                        if(!item.childList){
                          item.childList=[];
                        }
                    })
                }
                that.typeList = list;
            })
            .catch(function (error) {
                  // handle error
                  console.log(error);
            })
        },
        getData(){
            this.loading = true;
            let that = this;
            this.$axios.$get("/f/pageHelper?classifyId="+this.type+"&pageNo="+this.pageNo+"&pageSize=10&title="+this.input)
            .then(function (response) {
                that.show = true;
                that.total = response.count;
                that.list = response.data;
                that.loading = false;
            })
            .catch(function (error) {
                  // handle error
                  console.log(error);
            })
        },
        goContent(url){
            this.$router.push(url);
        },
        pageChange(index){
            this.pageNo = index;
            this.getData();
        }
    }
}
</script>

<style lang="less" scoped>
    .clear{
      clear: both;
    }
    .help-page{
        .help-main{
            width:1250px;
            margin:0 auto;
            margin-top:30px;
            // min-height: 500px;

        }
        .type-title{
            width:100%;
            line-height:40px;
            font-size:18px;
            color:#555555;
        }
        .help-type{
            width:250px;
            float:left;
            .type-list{
                width:100%;
                box-sizing:border-box;
                padding:10px 20px;
                border:1px solid #dcdcdc;
                .type-item{
                    line-height:30px;
                    font-size:14px;
                    color:#777777;
                    cursor:pointer;
                }
                .active{
                    color:#17a2b8;
                }
                .type-item:hover{
                    color:#17a2b8;
                }
            }

        }
        .help-content{
            width:calc(100% - 330px);
            float:left;
            margin-left:80px;
            .study-pagination{
                width:100%;
                float:left;
            }
            .content-help{
              padding:15px;
              .data-item{
                  width:100%;
                  box-sizing:border-box;
                  height:40px;
                  margin-top:0px;

                  cursor:pointer;
                  .name{
                      display:block;
                      width:calc(100% - 220px);
                      overflow: hidden;
                      text-overflow:ellipsis;
                      white-space: nowrap;
                      line-height:40px;
                      height:40px;
                      font-size:14px;
                      color:#555555;
                      float:left;
                  }
                  .name:hover{
                      color:#17a2b8;
                  }
                  .time{
                      display:block;
                      width:200px;
                      overflow: hidden;
                      text-overflow:ellipsis;
                      white-space: nowrap;
                      line-height:40px;
                      height:40px;
                      font-size:14px;
                      color:#777777;
                      float:right;
                  }
              }
            }

            .data-title{
                width:100%;
                height:40px;
                margin-top:20px;
                background:#edf3fc;
                float:left;
                // margin-bottom:20px;
                .name{
                    display:block;
                    width:50%;
                    line-height:40px;
                    text-align:center;
                    font-size:14px;
                    color:#555555;
                    float:left;
                }
            }
            .help-all{
                width:100%;
                box-sizing:border-box;
                padding-top:20px;

                .el-input{
                    width:300px;
                    float:left;
                }
                .search{
                    width:100px;
                    height:40px;
                    border-radius:3px;
                    background:#0076ca;
                    color:#ffffff;
                    font-size:15px;
                    line-height:40px;
                    text-align:center;
                    float:left;
                    margin-left:10px;
                    cursor:pointer;
                }
            }
            .address{
                width:100%;
                height:40px;
                box-sizing:border-box;
                padding:0 25px;
                background:#f5f5f5;

                .text{
                    line-height:40px;
                    font-size:14px;
                    color:#777777;
                    float:left;
                }
                .el-breadcrumb{
                    margin-top:13px;
                    float:left;
                }
            }
        }
    }


</style>
